<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="确认删除" @ok="handleOk" :confirm-loading="confirmLoading">
            <div>
                <div class="fz-14 mb-16 col-8A93A7">删除实例后，实例数据将被彻底删除，无法恢复</div>
                <div>
                    <a-checkbox v-model:checked="checked"><span
                            class="fz-14 mb-16 col-8A93A7">我以了解风险，确认删除</span></a-checkbox>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { XsyMessage } from '@/libs/util.toast'
import { handleInstance } from 'api/modules/api.instance'

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    instance: {
        type: Object,
        default: {}
    }
});

const checked = ref(false)
const emit = defineEmits(['update:modelValue', 'handelOpt']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

// 确定按钮的回调
const confirmLoading = ref(false)
const handleOk = () => {
    if (!checked.value) {
        XsyMessage.warning('请勾选风险提示')
    } else {
        const params = {
            instanceId: props.instance?.Instance?.instanceId,
            method: 'release',
        }
        confirmLoading.value = true
        handleInstance(params).then(res => {
            confirmLoading.value = false
            if (res.code == 0) {
                emit('update:modelValue', false)
                emit('handelOpt', props.instance?.Instance?.instanceId)
            }
        }).catch(() => {
            confirmLoading.value = false
        })
    }
};

</script>

